<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>823680621@qq.com</title>
	<style>
		#box{
			width: 100px;
			height: 100px;
			background: red;
			position: absolute;
			left: 0;
		}
		#onbox{
			width: 200px;
			height: 200px;
			border:2px solid gray;
			position: absolute;
			right: 0;
		}
	</style>
</head>
<body>
	<div id="box" draggable="true">拖拽元素</div>
	<div id="onbox">容器</div>
</body>
<script>
	box.ondragstart=function(){//开始拖拽的一瞬间
		this.style.background="gray";
		this.innerHTML="拖拽开始"
	}
	box.ondrag=function(){//拖拽中
		console.log("拖拽中");
	}
	box.ondragend=function(){//拖拽结束
		this.style.background="red";
		this.innerHTML=""
	}

	onbox.ondragenter=function(){//拖拽元素进目标元素
		this.style.borderColor="red";
		this.innerHTML="拖拽元素进入目标元素";
	}
	onbox.ondragover=function(e){//拖拽元素在目标元素内
		this.innerHTML="拖拽元素在目标元素内";
		e.preventDefault();
	}
	onbox.ondragleave=function(){//拖拽元素离开目标元素
		this.style.borderColor="gray";
	}
	onbox.ondrop=function(){//拖拽元素在目标元素释放
		// this.style.background="blue";
		// this.innerHTML="拖拽元素在目标元素释放"
		document.body.removeChild(box);
		

	}



</script>
</html>